<template>
  <div class="msignin_wrapper">
    <form class="form-horizontal">
      <div class="form-group">
        <label for="musername" class="col-sm-2 control-label">用户名</label>
        <div class="col-sm-10">
          <input @blur="checkNameRep" v-model="form.username" type="text" class="form-control" id="musername">
        </div>
      </div>
      <div class="form-group">
        <label for="mnickname" class="col-sm-2 control-label">昵称</label>
        <div class="col-sm-10">
          <input v-model="form.nickname" type="text" class="form-control" id="mnickname">
        </div>
      </div>
      <div class="form-group ">
        <label for="mpassword" class="col-sm-2 control-label">密码</label>
        <div class="col-sm-10">
          <input v-model="form.password" type="password" class="form-control" id="mpassword">
        </div>
      </div>
      <div :class="['form-group',{'has-error':(form.pwdNotSure)},{'has-success':form.pwdSure},'has-feedback']">
        <label for="mrepassword" class="col-sm-2 control-label">确认密码</label>
        <div class="col-sm-10">
          <input :aria-describedby="form.pwdNotSure?'inputError2Status':'input2Success'"
                 v-model="form.repassword"
                 type="password"
                 class="form-control"
                 @blur="checkPwdIsSure"
                 id="mrepassword">
          <span v-show="form.pwdNotSure||form.pwdSure"
                :class="['glyphicon ',{'glyphicon-remove':form.pwdNotSure},{'glyphicon-ok':form.pwdSure} ,'form-control-feedback']"
                aria-hidden="true"></span>
          <!--<span v-show="form.pwdNotSure||form.pwdSure"-->
          <!--:id="form.pwdNotSure?'inputError2Status':'input2Success'"-->
          <!--class="sr-only">{{form.pwdNotSure?'(error)':''+form.pwdSure?'(success)':''}}</span>-->
        </div>

      </div>
      <div class="form-group">
        <label for="vcode" class="col-sm-2 control-label">验证码</label>
        <div class="col-sm-7">
          <input type="text"
                 v-model="code"
                 maxlength="4"
                 @change="checkVeri"
                 class="form-control"
                 id="vcode">
        </div>
        <a @click="createCode"  class="col-sm-2">
          <canvasCode :code="verifyCode"></canvasCode>
        </a>
      </div>
      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
          <button type="button" class="btn btn-default " @click="onSubmit">注册</button>
          <!--<button v-if="canSub" type="button" class="btn btn-default "  @click="onSubmit">注册</button>-->
          <button type="button" class="btn btn-default" @click="cancle">取消</button>
        </div>
      </div>
    </form>
  </div>
</template>

<script>
  import axios from 'axios';
  import jiami from '../util/verifyCode'
  import canvasCode from '../components/canvas_code'

  const md5 = require('../util/md5')
  export default {
    name: "m_sign_in", components: {canvasCode},
    created() {
      this.createCode()
      // alert('created')
    },
    mounted() {
      // alert('mounted')
      /*   let str = '1234567890zxcvbnmasdfghjklpoiuytrewqQWERTYUIOPLKJHGFDSAZXCVBNM';
         for (let i = 0; i < 4; i++) {
           this.verifyCode += str.charAt(Math.floor(Math.random() * str.length));
         }*/
      // this.verifyCode=this.createCode();
      // console.log(jiami(this.verifyCode))
      // axios.get('http://localhost:3000/signin?c=' + jiami(this.verifyCode));
      // console.log(this.verifyCode)
    },
    methods: {
      createCode() {
        this.verifyCode = '';
        // let c = '';
        let str = '1234567890zxcvbnmasdfghjklpoiuytrewqQWERTYUIOPLKJHGFDSAZXCVBNM';
        for (let i = 0; i < 4; i++) {
          this.verifyCode += str.charAt(Math.floor(Math.random() * str.length));
        }
        // return c;
      },
      checkVeri() {
        if (this.code == '')
          this.verRight = false;
        else if (this.code.toLowerCase()!=this.verifyCode.toLowerCase())
          this.verRight = false;
        else
          this.verRight = true;
      },
      cancle() {
        this.$router.go(-1);
      },
      checkUname() {
        if (this.form.username == '') {
          if (this.isPhone)
            this.$message.error('用户名不能为空');
          else
            this.$notify.error({
              title: '错误',
              message: '用户名不能为空'
            });
          this.form.unameRight = false;
        } else {
          this.form.unameRight = true;
        }
        this.checkNameRep();
      }, checkNameRep() {
        axios.get('http://localhost:3000/signin/checkRep?username=' + this.form.username).then(res => {
          if (res.data.code == 0) {

            if (this.isPhone)
              this.$message.error(res.data.msg);
            else
              this.$notify.error({
                title: '错误',
                message: res.data.msg
              });
            this.nameRep = 0;
          } else {
            this.nameRep = 1;
          }
        });
      },
      checkPwd() {
        if (this.form.password == '') {
          if (this.isPhone)
            this.$message.error('密码不能为空233');
          else
            this.$notify.error({
              title: '错误',
              message: '密码不能为空233'
            });

          this.form.pwdRight = false;
        } else {
          this.form.pwdRight = true;
        }
      },
      checkPwdIsSure() {

        if (this.form.repassword != this.form.password) {
          this.form.pwdNotSure = true;
          if (this.isPhone)
            this.$message.error('两次输入密码不一致');
          else
            this.$notify.error({
              title: '错误',
              message: '两次输入密码不一致'
            });

        } else if (this.form.repassword == '') {
          this.form.pwdNotSure = true;
          if (this.isPhone)
            this.$message.error('确认密码不能为空');
          else
            this.$notify.error({
              title: '错误',
              message: '确认密码不能为空'
            });
        }
        else {
          this.form.pwdNotSure = false;
          this.form.pwdSure = true;
        }
      },
      onSubmit() {
        if (this.form.username == '') {
          if (this.isPhone)
            this.$message.error('用户名不能为空');
          else
            this.$notify.error({
              title: '错误',
              message: '用户名不能为空'
            });
          return;
        }
        if ('' == this.form.password) {

          if (this.isPhone)
            this.$message.error('密码不能为空');
          else
            this.$notify.error({
              title: '错误',
              message: '密码不能为空'
            });
          return;
        }
        if (this.form.repassword != this.form.password) {
          this.form.pwdNotSure = true;
          if (this.isPhone)
            this.$message.error('两次输入密码不一致');
          else
            this.$notify.error({
              title: '错误',
              message: '两次输入密码不一致'
            });
          return;
        }
        if (this.form.repassword == '') {
          if (this.isPhone)
            this.$message.error('确认密码不能为空');
          else
            this.$notify.error({
              title: '错误',
              message: '确认密码不能为空'
            });
          return;
        }
        if (!this.verRight) {

          if (this.isPhone)
            this.$message.error('验证码错误');
          else
            this.$notify.error({
              title: '错误',
              message: '验证码错误'
            });
          return;
        }


        // this.canSub = this.form.pwdSure
        //   && this.form.pwdRight
        //   && this.form.unameRight
        //   && this.verRight
        //   && this.nameRep != 0;

        // if (this.canSub) {
        axios.post('http://localhost:3000/signin', {
          username: this.form.username,
          nickname: this.form.nickname,
          password: md5(this.form.password),
          code: this.code,
          vCode: jiami(this.verifyCode)
        }).then(res => {
          console.log(res)
          if (this.isPhone)
            this.$message({
              message: '注册成功',
              type: 'success'
            });
          else
            this.$notify({
              title: '成功',
              message: '注册成功',
              type: 'success'
            });

          this.$router.push('/');
        }).catch(error => {

          if (this.isPhone)
            this.$message.error('禁止多次注册');
          else
            this.$notify.error({
              title: '错误',
              message: '禁止多次注册'
            });
          console.log(error.message)
        });

      },
      checkIfRepeat() {

      },
    }
    ,
    data() {
      return {
        form: {
          username: '',
          nickname: '',
          password: '',
          repassword: '',
          pwdSure: false,
          pwdNotSure: false,
          pwdRight: false,
          unameRight: false,
          verRight: false,
          nameRep: 2
        },
        canSub: false,
        verifyCode: '',
        code: '',
        isPhone: navigator.userAgent.indexOf('iPhone') != -1 || navigator.userAgent.indexOf('Android') != -1
      }
    }
  }
</script>

<style scoped>
  .msignin_wrapper {
    padding-top: 100px;
    width: 50%;
    height: 500px;
    position: relative;
    top: 0px;
    bottom: 0px;
    right: 0px;
    left: 0px;
    margin: auto;
  }
</style>
